<!doctype html>
<html>
<head>
<title>Mapbox Example Maps</title>
<style>
.mapwrapper {
  margin: 20px auto;
  width: 469px;
}

#viewport, #viewport2 {
    width: 459px;
    height: 390px;
    cursor: move;
    overflow: hidden;
}

.mapwrapper {
    position: relative;
}

.map-control {
    position: absolute;
    top: 50px;
    right: 10px;
    background: url(images/map-control.png) no-repeat;
    height: 63px;
    width: 100px;
}

.map-control a {
    height: 18px;
    width: 18px;
    display: block;
    text-indent: -999em;
    position: absolute;
    outline: none;
}

.map-control a:hover {
    background: #535353;
    opacity: .4;
    filter: alpha(opacity=40);
}

.map-control a.left {
    left: 39px;
    top: 22px;
}

.map-control a.right {
    left: 79px;
    top: 22px;
}

.map-control a.up {
    left: 59px;
    top: 2px;
}

.map-control a.down {
    left: 59px;
    top: 42px;
}

.map-control a.zoom {
    left: 2px;
    top: 8px;
    height: 21px;
    width: 21px;
}

.map-control a.back {
    left: 2px;
    top: 31px;
    height: 21px;
    width: 21px;
}
</style>
<script src="../jquery-1.10.1/jquery-1.10.1.min.js"></script>
<script src="jquery.mapbox.js"></script>
<script src="jquery.mousewheel.js"></script>
</head>
<body>

<div class="mapwrapper">
    <h4>Mousewheel enabled</h4>
    <div id="viewport">
      <div class="map-layer" style="background: url(images/layer1.png) no-repeat; width: 469px; height: 400px;"> 
          <!--top level map content goes here--> 
      </div> 
      <div class="map-layer" style="height: 1097px; width: 1286px;"> 
          <img src="images/layer2.jpg" alt="" /> 
          <div class="mapcontent"> 
              <!--map content goes here--> 
          </div> 
      </div> 
      <div class="map-layer" style="height: 1794px; width: 2104px;"> 
          <img src="images/layer3.jpg" alt="" /> 
           <div class="mapcontent"> 
              <!--map content goes here--> 
          </div> 
      </div> 
      <div class="map-layer" style="height: 2492px; width: 2922px;"> 
          <img src="images/layer4.jpg" alt="" /> 
           <div class="mapcontent"> 
              <!--map content goes here--> 
          </div> 
      </div> 
    </div>
</div>
<div class="mapwrapper">
    <h4>Simple control panel</h4>
    <div id="viewport2">
        <div class="map-layer" style="background: url(images/layer1.png) no-repeat; width: 469px; height: 400px;">
            <!--top level map content goes here-->
        </div>
        <div class="map-layer" style="height: 1097px; width: 1286px;">
            <img src="images/layer2.jpg" alt="" />
            <div class="mapcontent">
                <!--map content goes here-->
            </div>
        </div>
        <div class="map-layer" style="height: 1794px; width: 2104px;">
            <img src="images/layer3.jpg" alt="" />
             <div class="mapcontent">
                <!--map content goes here-->
            </div>
        </div>
        <div class="map-layer" style="height: 2492px; width: 2922px;">
            <img src="images/layer4.jpg" alt="" />
             <div class="mapcontent">
                <!--map content goes here-->
            </div>
        </div>
    </div>
    <div class="map-control">
        <a href="#left" class="left">Left</a>
        <a href="#right" class="right">Right</a>
        <a href="#up" class="up">Up</a>
        <a href="#down" class="down">Down</a>
        <a href="#zoom" class="zoom">Zoom</a>
        <a href="#zoom_out" class="back">Back</a>
    </div>
</div>
<script type="text/javascript"> 
    $(document).ready(function() { 
        $("#viewport").mapbox({mousewheel: true});
        $("#viewport2").mapbox({ 
            layerSplit: 8 //smoother transition for mousewheel 
        }); 
        $(".map-control a").click(function() { //control panel 
            var viewport = $("#viewport2"); 
            // this.className is same as method to be called 
            if(this.className == "zoom" || this.className == "back") { 
                viewport.mapbox(this.className, 2);//step twice 
            } 
            else { 
                viewport.mapbox(this.className); 
            } 
            return false; 
        }); 
    }); 
</script>
</body>
</html>